<!DOCTYPE html>
<title>SwissGL demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="demo/style.css">

<script src='swissgl.js'></script>
<script src='audio.js'></script>
<script src="demo/dat.gui.min.js"> </script>

<script src='demo/NeuralCA.js'></script>
<script src='demo/BitField.js'></script>
<script src='demo/GameOfLife.js'></script>
<script src='demo/ParticleLife.js'></script>
<script src='demo/ParticleLenia.js'></script>
<script src='demo/FancyLenia.js'></script>
<script src='demo/Spectrogram.js'></script>
<script src='demo/Physarum.js'></script>
<script src='demo/SurfaceNormals.js'></script>
<script src='demo/MeshGrid.js'></script>
<script src='demo/CubeDeform.js'></script>
<script src='demo/ColorCube.js'></script>
<script src='demo/Shadowmap.js'></script>
<script src='demo/ParticleLife3d.js'></script>
<script src='demo/Torus4d.js'></script>
<script src='demo/DeferredShading.js'></script>
<script src='demo/Springs.js'></script>
<script src='demo/ReactionDiffusion.js'></script>
<script src='demo/DotCamera.js'></script>
<script src='demo/Physarum3d.js'></script>
<script src='demo/TextureSamplers.js'></script>
<script src='demo/LargeLenia.js'></script>
<script src='demo/FireflySync.js'></script>
<script src='demo/Wave2D.js'></script>
<script src='demo/Bloom.js'></script>
<script src='demo/main.js'></script>

<details id="panel" open>
    <summary><a href="https://github.com/google/swissgl">SwissGL</a> demos</summary>
    <div id="cards"></div>
</details>
<div id="demo">
    <canvas id="c" width="640" height="360"></canvas>
    <div id="buttons">
        <button title="VR" onclick="toggleVR()" id="vrButton">VR</button>
        <button title="AR" onclick="toggleAR()" id="arButton">AR</button>
        <button title="settings" onclick="toggleGui()" id="settingButton" style="font-size: 180%;">⛯</button>
        <button title="source code"><a id='sourceLink' href="" target="_blank">&lt;&gt;</a></button>
        <button title="fullscreen" onclick="fullscreen()"">⛶</button>
    </div>
</div>
<button title="about" id="aboutButton" onclick="showAbout()">?</button>
<div id="about">
    <p>
        <a href="https://github.com/google/swissgl"><b>SwissGL</b></a>
        is a prototype of a minimal yet expressive GPU library built on 
        WebGL2. A single <nobr>"glsl()"</nobr> function runs GLSL code 
        snippets on the GPU and manages the resulting texture buffers.
    </p>
    <p>
        This page contains a few demos built using the library. Click 
        the <nobr>"&lt;&gt;"</nobr> button to see the source of the current example.
    </p>
    <button style="font-size: 20px; margin: auto;" onclick="hideAbout()">hide</button>
</div>
<script src="https://cdn.counter.dev/script.js" data-id="8bf0ceb7-d869-4a63-ba6b-32b18ec544f1" data-utcoffset="1"></script>
<script>
    'use strict';
    const app = new DemoApp([
        NeuralCA, DotCamera, MeshGrid, Bloom, Wave2D, ParticleLife3d, ParticleLife, ReactionDiffusion, FireflySync,
        BitField, TextureSamplers, GameOfLife, ParticleLenia, FancyLenia, LargeLenia, Spectrogram, Physarum,
        Physarum3d, SurfaceNormals, CubeDeform, ColorCube, Shadowmap, Torus4d, DeferredShading, Springs
    ]);
    function fullscreen() {
        app.fullscreen();
    }
    function toggleGui() {
        app.toggleGui();
    }
    function toggleVR() {
        app.toggleXR('vr');
    }
    function toggleAR() {
        app.toggleXR('ar');
    }
    const showAbout = ()=>{$('#about').style.display = 'block';}
    const hideAbout = ()=>{$('#about').style.display = 'none';}
    hideAbout();
    $('#demo').addEventListener('pointerdown', ()=>{
        hideAbout();
        if (window.innerWidth < 500) {
            // close menu on small screens
            $('#panel').removeAttribute("open");
        }
    })
    $('#panel').addEventListener('click', hideAbout);

</script>
